De flex-basis eigenschap

Syntaxis

flex-basis: auto | <'width'>

Beschrijving

De flex-basis eigenschap neemt de waarde van de width eigenschap over, en stelt de flex basis in: de initiële hoofdafmeting (zie Een flexibele lay-out maken) van het flex item, voordat de vrije ruimte wordt verdeeld op basis van de flex factoren (zie De flex-grow eigenschap en De flex-shrink eigenschap).

Behalve voor auto, wordt flex-basis berekend zoals de width eigenschap in de horizontale schrijfwijze: procentuele waarden voor de eigenschap flex-basis worden relatief t.o.v. binnen-hoofdafmeting van de flex container ingesteld. De eigenschap flex-basis bepaalt ook de grootte van de content box van het element, tenzij anders bepaald door de box sizing eigenschap.

Als de opgegeven flex-basis auto is, gebruikt flex basis de waarde van de hoofdafmeting van het flex item.

De flex-basis eigenschap wordt meestal gebruikt in combinatie met de flex-shrink en de flex-grow eigenschappen, in de flex stenonotatie.

In het volgende voorbeeld, wordt de flex-basis gebruikt in de flex stenonotatie. De flex-shrink en flex-grow eigenschappen worden ingesteld zodat de items niet groeien noch krimpen. De opgegeven waarde met behulp van flex-basis bepaalt de hoofdafmeting van elk item. Probeer de waarden van alle drie de eigenschappen van de flex stenonotatie in te stellen om te zien hoe de items daarop reageren.

Het instellen van de eigenschap flex-shrink heeft geen effect als er positieve ruimte beschikbaar is in de flex container. Om de flex-shrink te kunnen instellen stel je de flex-basis van beide elementen zodanig in dat de som van de breedten groter is dan de breedte van de container.